<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	page {
		// background-color: #fff;
	}

	ul,
	ol {
		list-style: none;
	}

	.header {
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: #FAFAFA;
		z-index: 1000;

		.head {
			// position: fixed;
			// top: 0rpx;
			// left: 0rpx;
			padding: 15rpx 10rpx;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			border: 2rpx solid #e5e5e5;
			overflow: hidden;

			.case {
				width: 80rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 50rpx;
					height: 46rpx;
				}
			}

			.shopCar {
				width: 80rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 50rpx;
					height: 46rpx;
				}
			}

			.search {
				width: calc(100% - 180rpx);
				position: relative;
				background-color: #eee;
				border-radius: 6rpx;

				.img-left {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					left: 8rpx;
					top: 14rpx;

				}

				.img-right {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 8rpx;
					top: 4rpx;

				}

				.inp {
					height: 100%;
					padding-left: 40rpx;
					border: none;
					color: #999;
					font-size: 30rpx;
				}
			}

			.name {
				width: calc(100% - 160rpx);
				height: 58rpx;
				line-height: 59rpx;
				text-align: center;
				font-size: 36rpx;
				color: #5e5e5e;
				font-weight: 800;
			}


		}

	}

	.list-nav {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		// padding-top: 92rpx;
		// position: sticky;
		// top: -2rpx;;
		// z-index: 10;
		background-color: #fff !important;
		position: fixed;
		top: 92rpx;
		left: 0rpx;
		z-index: 1000;

		ul {
			height: 78rpx;
			line-height: 78rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #e6e6e6;
			background-color: #fff;

			li {
				width: calc(100% / 3);
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				// margin: 0 auto;
				// vertical-align: middle;
				margin: auto 0rpx;
				border-left: 2rpx solid #e6e6e6;
				position: relative;
				// &.active{
				// 	color: #EF4562;
				// }
			}

			li:last-child {

				&::after {
					content: '';
					display: block;
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border: 1rpx solid #ccc;
					top: 10%;
					right: 25rpx;
					border-top: transparent;
					border-left: transparent;
					transform: rotate(45deg);

				}
			}

			li.active {
				color: #EF4562;
			}

		}

		.price-category {
			background-color: #fff;
			transition: all .5s ease;
			overflow: hidden;

			// height: 0rpx;
			.price-choose {
				display: flex;
				justify-content: space-between;
				// padding: 0rpx 30rpx;
				padding: 15rpx 22rpx 8rpx;

				.box {
					width: 225rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin: 15rpx 0rpx 0rpx 0rpx;
					background-color: #F3F3F3;
					font-size: 28rpx;
					// letter-spacing: 20rpx; 
				}
			}

			.price-input {
				display: flex;
				justify-content: space-between;
				padding: 0rpx 22rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				color: #333;

				// display: block;
				.text {
					width: 110rpx;
				}

				input {
					width: 170rpx;
					height: 60rpx;
					margin: 20rpx 0rpx 0rpx 0rpx;
					padding: 0rpx 10rpx;
					border: 2rpx solid #e5e5e5;
					text-align: center;
				}

				.to {
					width: 20rpx;
					height: 20rpx;
					border-bottom: 2rpx solid #cbcbcb;
					margin-top: 30rpx;
				}

				.confirm {
					width: 170rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #FF5B76;
					margin-top: 20rpx;
					color: #fff;
				}
			}
		}

		.show {
			max-height: 200rpx;
			opacity: 1;
		}

		.noshow {
			max-height: 0;
			opacity: 0;
		}
	}

	.list {
		background-color: #EFEFEF;
		padding: 14rpx;
		padding-top: 180rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		// display: none;
		// flex-direction: wrap;
		.list-item {
			width: 353rpx;
			// padding-bottom: 600rpx;
			// height: 235px;
			margin-bottom: 10rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.i-img {
				width: 100%;
				height: 470rpx;

				position: relative;

				img {
					width: 100%;
					height: 100%;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}

				.look-similar {
					width: 86rpx;
					height: 86rpx;
					background-image: url('/static/i-look.png');
					background-size: 70% 70%;
					background-repeat: no-repeat;
					background-position: center center;
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
				}
			}


			.i-bottom {
				width: 100%;
				padding: 10rpx 12rpx 10rpx;

				// box-sizing: border-box;
				.i-text {
					width: 100%;
					height: 68rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #333;
					/* 核心修正 */
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					/* 必须的布局模式 */
					-webkit-line-clamp: 2;
					/* 限制显示行数 */
					-webkit-box-orient: vertical;
					/* 垂直方向排列 */

					/* 添加以下属性增强兼容性 */
					word-break: break-all;
					/* 长单词换行处理 */
				}

				.i-price-collectNum {
					display: flex;
					justify-content: space-between;
					margin-top: 6rpx;

					.price {
						font-size: 30rpx;
						color: #333;
						font-weight: bold;
					}

					.collectNum {
						display: flex;
						justify-content: right;


						.num {
							line-height: 40rpx;
							font-size: 24rpx;
							color: #999;
							padding: 0rpx 6rpx;
						}

						.icon {
							width: 24rpx;
							// height: 24rpx;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100%;
								height: 100%;
							}
						}

					}
				}
			}
		}
	}
</style>
<template>
	<view class="header">
		<view class="head">
			<view class="case" @click="backTo">
				<img src="/static/i-left-two.png" alt="" />
			</view>
			<view v-if="scale==='true'" class="search" @click="jumpSearch">
				<img class="img-left" src="/static/i-search.png" alt="" />
				<input class="inp" type="text" placeholder="上衣" v-model="inp_text"
					placeholder-style="color:#999;font-size:20rpx" />
				<img class="img-right" src="/static/i-back.png" alt="" />
			</view>
			<view v-else class="name">
				{{title}}
			</view>
			<view class="shopCar">
				<img src="/static/i-shopCar-sec.png" alt="" />
			</view>
		</view>
	</view>

	<view class="list-nav">
		<ul>
			<li v-for="item in navName" @click="changeActiveRight(item.sortKey
	)" :class="{active : item.sortKey === sortActive}">
				{{item.title}}
			</li>
		</ul>
		<!-- 下拉价格区间 -->
		<view class="price-category" :class='isShow? "show":"noshow" '>
			<view class="price-choose">
				<view class="box" v-for="item in priceArr" @click="foo(item.min,item.max)">
					{{item.min}} - {{item.max}}
				</view>
			</view>
			<view class="price-input">
				<view class="text">区间(元)</view>
				<input type="text" v-model="min" />
				<view class="to"></view>
				<input type="text" v-model="max" />
				<view class="confirm" @click="confirm">确认</view>
			</view>
		</view>
	</view>
	<view class="list">
		<view class="list-item" v-for="item in shopList" @click.stop="toDetail(item.tradeItemId)">
			<view class="i-img">
				<img :src="item.img" alt="" loading="lazy" />
				<view class="look-similar" @click.stop="jumpLooksimilar">

				</view>
			</view>
			<view class="i-bottom">
				<view class="i-text">
					{{item.title}}
				</view>
				<view class="i-price-collectNum">
					<view class="price">
						¥{{item.price}}
					</view>
					<view class="collectNum">
						<view class="num">
							{{item.cfav}}
						</view>
						<view class="icon">
							<image src="/static/collect.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	const inp_text = ref('')
	const min = ref('')
	const max = ref('')
	//价格数组
	const priceArr = ref([{
			min: '50',
			max: '150'
		},
		{
			min: '250',
			max: '650'
		},
		{
			min: '850',
			max: '1150'
		},
	])
	//导航栏数组名
	const navName = ref([])
	//默认选中的标题
	const sortActive = ref('pop')
	//商品列表数组
	const shopList = ref([])
	//显示隐藏
	const isShow = ref(false)
	const scale = ref('true')
	//图片导航名字
	const title = ref('')
	//点击输入框跳到搜索页
	const jumpSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	//跳转相似页
	const jumpLooksimilar = () => {
		uni.navigateTo({
			url: '/pages/lookSimilar/lookSimilar'
		})
	}
	const foo = (minValue, maxValue) => {
		min.value = minValue
		max.value = maxValue
	}

	//返回上一页
	const backTo = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const changeActiveRight = (sortKey = 'pop') => {
		sortActive.value = sortKey
		if (sortKey === "price") {
			isShow.value = !isShow.value
			return
		}
		if (min.value && max.value) {
			if (scale.value === 'true') {
				searchResult(inp_text.value, sortActive.value, min.value, max.value)
				return
			}
			imgResult(inp_text.value, sortActive.value, min.value, max.value)


		} else {
			if (scale.value === 'true') {
				searchResult(inp_text.value, sortActive.value)
				return
			}
			imgResult(inp_text.value, sortActive.value)
		}


	}
	//确认按钮
	const confirm = () => {
		searchResult(inp_text.value, sortActive.value, min.value, max.value)
		sortActive.value = 'pop'
		isShow.value = !isShow.value
	}

	//搜索词搜索
	const searchResult = async (q, sort = 'pop', minPrice, maxPrice) => {
		await uni.request({
			url: "https://apis.netstart.cn/mogujie/search/searchByKeyword",
			method: 'GET',
			data: {
				q,
				sort,
				minPrice,
				maxPrice
			},
			success: (res) => {
				console.log("搜索：", res)
				navName.value = res.data.result.sortFilter
				navName.value.push({
					sortKey: 'price',
					title: '价格'
				})

				shopList.value = res.data.result.wall.docs
				console.log("商品列表:", shopList.value)

				priceArr.value = res.data.result.priceFilter
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	//图片导航信息
	const imgResult = async (fcid, sort = 'pop', minPrice, maxPrice) => {
		await uni.request({
			url: 'https://apis.netstart.cn/mogujie/search/searchByCategory',
			method: "GET",
			data: {
				fcid,
				sort,
				minPrice,
				maxPrice
			},
			success: (res) => {
				// console.log("搜索：", res)
				navName.value = res.data.result.sortFilter
				navName.value.push({
					sortKey: 'price',
					title: '价格'
				})

				shopList.value = res.data.result.wall.docs
				console.log("商品列表:", shopList.value)
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	const toDetail = (iid) => {
		uni.navigateTo({
			url: `/pages/detail/detail?itemId=${iid}`
		});
	}
	onLoad((opt) => {
		// console.log(opt.q);
		inp_text.value = opt.q
		scale.value = opt.isSearch
		title.value = opt.name
		if (scale.value === "true") {
			searchResult(inp_text.value)
		} else {
			imgResult(inp_text.value)
		}

	})
</script>